<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>墨轩 App Icon Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #89f7fe 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        h1 {
            color: #4a90e2;
            margin-bottom: 30px;
        }
        .icon-preview {
            margin: 20px 0;
        }
        .download-section {
            margin-top: 30px;
        }
        button {
            background: linear-gradient(135deg, #4a90e2, #357abd);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
            transition: all 0.3s ease;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
        }
        .instructions {
            background: rgba(135, 206, 235, 0.2);
            padding: 20px;
            border-radius: 15px;
            margin-top: 20px;
            text-align: left;
        }
        .size-options {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>墨轩 App Icon Generator</h1>
        <p>Fresh Blue-themed Clean App Icon</p>
        
        <div class="icon-preview">
            <canvas id="iconCanvas" width="512" height="512" style="max-width: 200px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.15);"></canvas>
        </div>
        
        <div class="size-options">
            <button onclick="generateIcon(57)">57x57 (iOS)</button>
            <button onclick="generateIcon(72)">72x72 (Android)</button>
            <button onclick="generateIcon(114)">114x114 (iOS)</button>
            <button onclick="generateIcon(144)">144x144 (Android)</button>
            <button onclick="generateIcon(192)">192x192 (Android)</button>
            <button onclick="generateIcon(512)">512x512 (Store)</button>
        </div>
        
        <div class="download-section">
            <button onclick="downloadIcon()">Download Current Icon</button>
            <button onclick="generateAllSizes()">Generate All Sizes</button>
        </div>
        
        <div class="instructions">
            <h3>Instructions:</h3>
            <ol>
                <li>Click on the size buttons to generate icons for different platforms</li>
                <li>Use "Download Current Icon" to save the displayed icon</li>
                <li>Use "Generate All Sizes" to create a complete icon set</li>
                <li>Place the icons in your UniApp project's static folder</li>
                <li>Update manifest.json to reference the new icons</li>
            </ol>
        </div>
    </div>

    <script>
        let currentSize = 512;
        
        function drawIcon(canvas, size) {
            const ctx = canvas.getContext('2d');
            canvas.width = size;
            canvas.height = size;
            
            // Clear canvas
            ctx.clearRect(0, 0, size, size);
            
            // Create blue gradient background
            const gradient = ctx.createLinearGradient(0, 0, size, size);
            gradient.addColorStop(0, '#667eea');
            gradient.addColorStop(0.3, '#4a90e2');
            gradient.addColorStop(0.7, '#89f7fe');
            gradient.addColorStop(1, '#66a6ff');
            
            // Draw rounded rectangle background
            const radius = size * 0.15;
            ctx.fillStyle = gradient;
            roundedRect(ctx, 0, 0, size, size, radius);
            ctx.fill();
            
            // Add overlay pattern for depth
            const overlayGradient = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
            overlayGradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
            overlayGradient.addColorStop(0.7, 'rgba(255, 255, 255, 0.2)');
            overlayGradient.addColorStop(1, 'rgba(135, 206, 235, 0.1)');
            
            ctx.fillStyle = overlayGradient;
            roundedRect(ctx, 0, 0, size, size, radius);
            ctx.fill();
            
            // Draw geometric symbol instead of heart
            const symbolSize = size * 0.35;
            const symbolX = size / 2;
            const symbolY = size / 2 - size * 0.08;
            
            ctx.fillStyle = '#ffffff';
            ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
            ctx.shadowBlur = size * 0.015;
            ctx.shadowOffsetY = size * 0.008;
            
            // Draw a modern geometric shape (diamond with circle)
            drawModernSymbol(ctx, symbolX, symbolY, symbolSize);
            
            // Reset shadow
            ctx.shadowColor = 'transparent';
            ctx.shadowBlur = 0;
            ctx.shadowOffsetY = 0;
            
            // Draw text "墨轩" - Make it larger since it's the baby's name
            const fontSize = size * 0.18; // Increased from 0.13 to 0.18 for prominence
            ctx.font = `bold ${fontSize}px Arial, "Microsoft YaHei", sans-serif`;
            ctx.fillStyle = '#ffffff';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // Add stronger text shadow for better visibility
            ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
            ctx.shadowBlur = size * 0.012;
            ctx.shadowOffsetY = size * 0.006;
            
            ctx.fillText('墨轩', size / 2, size - size * 0.14); // Moved up slightly to accommodate larger text
            
            // Reset shadow
            ctx.shadowColor = 'transparent';
            ctx.shadowBlur = 0;
            ctx.shadowOffsetY = 0;
        }
        
        function roundedRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + width - radius, y);
            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
            ctx.lineTo(x + width, y + height - radius);
            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
            ctx.lineTo(x + radius, y + height);
            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
            ctx.lineTo(x, y + radius);
            ctx.quadraticCurveTo(x, y, x + radius, y);
            ctx.closePath();
        }
        
        function drawModernSymbol(ctx, x, y, size) {
            ctx.save();
            
            // Draw outer diamond
            ctx.beginPath();
            ctx.moveTo(x, y - size * 0.4);
            ctx.lineTo(x + size * 0.4, y);
            ctx.lineTo(x, y + size * 0.4);
            ctx.lineTo(x - size * 0.4, y);
            ctx.closePath();
            ctx.fill();
            
            // Draw inner circle
            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
            ctx.beginPath();
            ctx.arc(x, y, size * 0.18, 0, Math.PI * 2);
            ctx.fill();
            
            // Draw center dot
            ctx.fillStyle = '#4a90e2';
            ctx.beginPath();
            ctx.arc(x, y, size * 0.06, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.restore();
        }
        
        function generateIcon(size) {
            currentSize = size;
            const canvas = document.getElementById('iconCanvas');
            drawIcon(canvas, size);
            canvas.style.maxWidth = Math.min(200, size) + 'px';
        }
        
        function downloadIcon() {
            const canvas = document.getElementById('iconCanvas');
            const link = document.createElement('a');
            link.download = `moxuan_icon_${currentSize}x${currentSize}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
        
        function generateAllSizes() {
            const sizes = [57, 72, 114, 144, 192, 512];
            const tempCanvas = document.createElement('canvas');
            
            sizes.forEach(size => {
                drawIcon(tempCanvas, size);
                const link = document.createElement('a');
                link.download = `moxuan_icon_${size}x${size}.png`;
                link.href = tempCanvas.toDataURL('image/png');
                link.click();
            });
            
            alert('All icon sizes have been generated and downloaded!');
        }
        
        // Initialize with default icon
        window.onload = function() {
            generateIcon(512);
        };
    </script>
</body>
</html>